Creating a Pie Chart | JavaScript Chart Documentation

Creating a Pie Chart

In the previous article, we covered how to create a simple 2D Chart using the SciChart.js Builder API.

The buildChart function can be used to build both 2D Charts and Pie Charts, so the returned object type will differ depending on the chart type. In this case you may need to handle the result by checking the shape of the object, for example:

Example Title	Copy Code
const result = await chartBuilder.buildChart(divElementId, definition); if ("sciChartSurface" in result) { const { sciChartSurface, wasmContext } = result; // handle 2D Chart ... } else { // handle Pie Chart const sciChartPieSurface = result; }

Example Title

Copy Code

const result = await chartBuilder.buildChart(divElementId, definition);
if ("sciChartSurface" in result) {
    const { sciChartSurface, wasmContext } = result;
    // handle 2D Chart
    ...
} else {
    // handle Pie Chart
    const sciChartPieSurface = result;
}

There are also specific function calls to build2DChart or buildPieChart as well. Find some examples below.

Using buildChart to create a Pie Chart

Example Title	Copy Code
import { chartBuilder } from "scichart/Builder/chartBuilder"; import { ESciChartSurfaceType } from "scichart/types/SciChartSurfaceType"; ... chartBuilder.buildChart(divElementId, { type: ESciChartSurfaceType.Pie2D, options: { segments: [ { text: "This", value: 10, color: "red" }, { text: "That", value: 5, color: "blue" }, { text: "Other", value: 7, color: "green" } ] } });

Example Title

Copy Code

import { chartBuilder } from "scichart/Builder/chartBuilder";
import { ESciChartSurfaceType } from "scichart/types/SciChartSurfaceType";
...
chartBuilder.buildChart(divElementId, {
    type: ESciChartSurfaceType.Pie2D,
    options: {
        segments: [
            { text: "This", value: 10, color: "red" },
            { text: "That", value: 5, color: "blue" },
            { text: "Other", value: 7, color: "green" }
        ]
    }
});

Using buildPieChart to explicitly create a Pie Chart.

Example Title	Copy Code
import { chartBuilder } from "scichart/Builder/chartBuilder"; chartBuilder.buildPieChart(divElementId, { segments: [ { text: "This", value: 10, color: "red" }, { text: "That", value: 5, color: "blue" }, { text: "Other", value: 7, color: "green" } ] });

Example Title

Copy Code

import { chartBuilder } from "scichart/Builder/chartBuilder";

chartBuilder.buildPieChart(divElementId, {
    segments: [
        { text: "This", value: 10, color: "red" },
        { text: "That", value: 5, color: "blue" },
        { text: "Other", value: 7, color: "green" }
    ]
});